<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
#plist li{ list-style:none; float:left; width:100px; height:50px; background:orange; text-align:center; line-height:50px; margin-right:15px; position:relative;}
#plist li a{color:white; text-decoration:none; position:relative;}
#plist li span{position:absolute; top:50px; left:0; text-align:center; width:100%; height:100%;}

</style>
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
	$('#plist li').hover(function(){
		var x=$(this).index();
			$('#plist li span').eq(x).stop().animate({
				top:'0px'
				})
			$('#plist li>a').eq(x).stop().animate({
				top:'-50px'
				})
			},function(){
		var x=$(this).index();
			$('#plist li span').eq(x).stop().animate({
				top:'50px'
				})
			$('#plist li>a').eq(x).stop().animate({
				top:'0px'
				})
			})
	})
</script>
</head>

<body>
<ul id="plist">
	<li><a href="index.html">文件</a><span><a href="">File</a></span></li>
	<li><a href="index.html">编辑</a><span><a href="">Edit</a></span></li>
	<li><a href="index.html">查看</a><span><a href="">Look</a></span></li>
	<li><a href="index.html">文件</a><span><a href="">File</a></span></li>
	<li><a href="index.html">编辑</a><span><a href="">Edit</a></span></li>
	<li><a href="index.html">查看</a><span><a href="">Look</a></span></li>
</ul>
</body>
</html>
